<template>
  <div class="Editarticle">
      <div class="components-container">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
          <el-form-item label="文章标题" prop="title">
            <el-input v-model="ruleForm.title"></el-input>
          </el-form-item>
          <el-form-item label="文章分类" prop="category_id">
            <el-cascader
              v-model="ruleForm.category_id"
              :options="options"
              :props="{ expandTrigger: 'hover' }"
              @change="handleChange"
              placeholder="请选择分类">
            </el-cascader>
          </el-form-item>
          <el-form-item label="文章封面图" prop="imageUrl">
            <el-upload
              class="avatar-uploader"
              :action="$imgApi"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              >
              <img v-if="ruleForm.imageUrl" :src="$imgUrl + ruleForm.imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="文章类型" prop="state">
            <el-radio-group @change="handleState" v-model="ruleForm.state" size="medium">
              <el-radio border  label="1">原创</el-radio>
              <el-radio border  label="2">转载</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="文章介绍" prop="desc">
            <el-input type="textarea" v-model="ruleForm.desc"></el-input>
          </el-form-item>
          <el-form-item label="文章内容" prop="content">
            <div class="editor-container">
              <UE :defaultMsg=defaultMsg :config=config ref="ue"></UE>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            <el-button type="primary" @click="getUEContent()">获取内容</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
  </div>
</template>

<script>
  import UE from '@/components/ue/ue';
  export default {
    data () {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        options: [],
        ruleForm: {
          title: '',
          category_id: '',
          imageUrl:'',
          state: '1',
          desc: '',
          content: '',
        },
        rules: {
          title: [
            { required: true, message: '请输入标题', trigger: 'blur' },
            { min: 3, max: 50, message: '长度在 3 到 50个字符', trigger: 'blur' }
          ],
          category_id: [
            { required: true, message: '请选择分类', trigger: 'change' }
          ],
          state: [
            { required: true, message: '请选择类型', trigger: 'change' }
          ],
          imageUrl: [
            {  required: true, message: '请选上传封面图', trigger: 'change' }
          ],
          desc: [
            {  required: true, message: '请填写文章简介', trigger: 'change' }
          ],
          content: [
            {  required: true, message: '请填写文章内容', trigger: 'change' }
          ],
        },
        defaultMsg: '',
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 350
        }
      }
    },
    mounted () {
      this.getCate()
    },
    methods: {
      handleState(value){
        console.log(value);
      },
      getCate() {
        let params = {
       
        };
        this.$api.getCate(params)
         .then(res => { 
            this.options = res.data.map(item=>{
               item.value = item.category_id
               item.label = item.category_name
               item.children.map(list=>{
                 list.value = list.category_id
                 list.label = list.category_name
                 if(list.children.length > 0){
                   list.children.map(list1=>{
                     list1.value = list1.category_id
                     list1.label = list1.category_name
                     if(list1.children.length > 0){
                        
                     }else{
                       list1.children = ''
                     }
                     return list1
                   })
                 }else{
                    list.children = ''
                 }
                 return list
               })
               return item
            })
         })
      },
      handleAvatarSuccess(res, file) {
        console.log(res);
        this.ruleForm.imageUrl = res.data.data;
      },
      handleChange(value) {
        console.log(value);
      },
      submitForm(formName) {
        this.ruleForm.content = this.$refs.ue.getUEContent()
        console.log(this.ruleForm.content);
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let params = {
              title: this.ruleForm.title,
              category_id :this.ruleForm.category_id[this.ruleForm.category_id.length - 1],
              image_url: this.ruleForm.imageUrl,
              desc: this.ruleForm.desc,
              status:this.ruleForm.state,
              content:this.ruleForm.content,
            };
            this.$api.createArticle(params)
             .then(res => {
               console.log(res)
               this.$router.push({
                  path: '/index',
                });
                this.$message({
                  message: '发表文章成功',
                  type: 'success'
                });
             })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      getUEContent() {
        let content = this.$refs.ue.getUEContent();
        this.$notify({
          title: '获取成功，可在控制台查看！',
          message: content,
          type: 'success'
        });
        console.log(content)
      }
    },
    components: {
      UE
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' scoped>

@import './index.less';

</style>